<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    [#include "../../../include/header.ftl" /]
    <link rel="stylesheet" href="${ctx}/static/apls/assets/css/components.min.css">
    <link rel="stylesheet" href="${ctx}/static/apls/assets/plugins/jquery-minicolors/jquery.minicolors.css">
    <link rel="stylesheet" href="${ctx}/static/apls/assets/plugins/bootstrap-colorpicker/css/colorpicker.css">
    <link rel="stylesheet" href="${ctx}/static/apls/assets/plugins/simple-line-icons/simple-line-icons.min.css">
    <script type="text/javascript" src="${ctx}/static/apls/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
    <script type="text/javascript" src="${ctx}/static/apls/assets/plugins/jquery-minicolors/jquery.minicolors.min.js"></script>
</head>
<body>
<div class="page-content" style="padding:25px">
    <div class="col-md-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light bordered form-fit">
            <div class="portlet-title">
                <div class="caption font-red-intense">
                    <i class="icon-speech font-red-intense"></i>
                    <span class="caption-subject bold uppercase">调色板</span>
                    <span class="caption-helper"></span>
                </div>
                <div class="actions">
                    <a href="javascript:;" class="btn btn-circle btn-default btn-sm">
                        <i class="fa fa-pencil"></i> Edit </a>
                    <a href="javascript:;" class="btn btn-circle btn-default btn-sm">
                        <i class="fa fa-plus"></i> Add </a>
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-wrench"></i>
                    </a>
                </div>
            </div>
            <div class="portlet-body form">
                <form action="#" id="form-username" class="form-horizontal form-bordered">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Hue (default)</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"><input type="text"
                                                                                                                                          id="hue-demo"
                                                                                                                                          class="form-control demo minicolors-input"
                                                                                                                                          data-control="hue"
                                                                                                                                          value="#ff6161"
                                                                                                                                          size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(255, 97, 97);"></span></span>
                                <div class="minicolors-panel minicolors-slider-hue" style="display: none;">
                                    <div class="minicolors-slider minicolors-sprite">
                                        <div class="minicolors-picker" style="top: 150px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite" style="background-color: rgb(255, 0, 0);">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 0px; left: 93px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Saturation</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"><input type="text"
                                                                                                                                          id="saturation-demo"
                                                                                                                                          class="form-control demo minicolors-input"
                                                                                                                                          data-control="saturation"
                                                                                                                                          value="#0088cc"
                                                                                                                                          size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(0, 136, 204);"></span></span>
                                <div class="minicolors-panel minicolors-slider-saturation" style="display: none;">
                                    <div class="minicolors-slider minicolors-sprite" style="background-color: rgb(0, 136, 204);">
                                        <div class="minicolors-picker" style="top: 0px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite">
                                        <div class="minicolors-grid-inner" style="opacity: 1;"></div>
                                        <div class="minicolors-picker" style="top: 30px; left: 83.3333px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Brightness</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"><input type="text"
                                                                                                                                          id="brightness-demo"
                                                                                                                                          class="form-control demo minicolors-input"
                                                                                                                                          data-control="brightness"
                                                                                                                                          value="#00ffff"
                                                                                                                                          size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(0, 255, 255);"></span></span>
                                <div class="minicolors-panel minicolors-slider-brightness">
                                    <div class="minicolors-slider minicolors-sprite" style="background-color: rgb(0, 255, 255);">
                                        <div class="minicolors-picker" style="top: 0px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite">
                                        <div class="minicolors-grid-inner" style="opacity: 0;"></div>
                                        <div class="minicolors-picker" style="top: 0px; left: 75px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Wheel</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"><input type="text"
                                                                                                                                          id="wheel-demo"
                                                                                                                                          class="form-control demo minicolors-input"
                                                                                                                                          data-control="wheel"
                                                                                                                                          value="#ff99ee"
                                                                                                                                          size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(255, 153, 238);"></span></span>
                                <div class="minicolors-panel minicolors-slider-wheel">
                                    <div class="minicolors-slider minicolors-sprite" style="background-color: rgb(255, 153, 238);">
                                        <div class="minicolors-picker" style="top: 0px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 97.9813px; left: 55.7164px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Hidden Input</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"><input type="hidden"
                                                                                                                                          id="hidden-input"
                                                                                                                                          class="demo minicolors-input"
                                                                                                                                          value="#db913d"
                                                                                                                                          size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(219, 145, 61);"></span></span>
                                <div class="minicolors-panel minicolors-slider-hue">
                                    <div class="minicolors-slider minicolors-sprite">
                                        <div class="minicolors-picker" style="top: 136.709px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite" style="background-color: rgb(255, 136, 0);">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 21px; left: 109px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Bottom left (default)</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"><input type="text"
                                                                                                                                          id="position-bottom-left"
                                                                                                                                          class="form-control demo minicolors-input"
                                                                                                                                          data-position="bottom left"
                                                                                                                                          value="#0088cc"
                                                                                                                                          size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(0, 136, 204);"></span></span>
                                <div class="minicolors-panel minicolors-slider-hue">
                                    <div class="minicolors-slider minicolors-sprite">
                                        <div class="minicolors-picker" style="top: 66.6667px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite" style="background-color: rgb(0, 170, 255);">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 30px; left: 150px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Bottom right</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-top minicolors-position-left"><input type="text"
                                                                                                                                       id="position-top-left"
                                                                                                                                       class="form-control demo minicolors-input"
                                                                                                                                       data-position="top left"
                                                                                                                                       value="#0088cc"
                                                                                                                                       size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(0, 136, 204);"></span></span>
                                <div class="minicolors-panel minicolors-slider-hue">
                                    <div class="minicolors-slider minicolors-sprite">
                                        <div class="minicolors-picker" style="top: 66.6667px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite" style="background-color: rgb(0, 170, 255);">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 30px; left: 150px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Top left</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-right"><input type="text"
                                                                                                                                           id="position-bottom-right"
                                                                                                                                           class="form-control demo minicolors-input"
                                                                                                                                           data-position="bottom right"
                                                                                                                                           value="#0088cc"
                                                                                                                                           size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(0, 136, 204);"></span></span>
                                <div class="minicolors-panel minicolors-slider-hue" style="display: none;">
                                    <div class="minicolors-slider minicolors-sprite">
                                        <div class="minicolors-picker" style="top: 66.6667px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite" style="background-color: rgb(0, 170, 255);">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 30px; left: 150px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12" id="color">
                            <div id="ff" style="width: 20px;height: 20px"></div>
                        </div>
                    </div>
                    <div class="form-group last">
                        <label class="col-md-3 control-label">Top right</label>
                        <div class="col-md-3">
                            <div class="minicolors minicolors-theme-bootstrap minicolors-position-top minicolors-position-right"><input type="text"
                                                                                                                                        id="position-top-right"
                                                                                                                                        class="form-control demo minicolors-input"
                                                                                                                                        data-position="top right"
                                                                                                                                        value="#0088cc"
                                                                                                                                        size="7"><span
                                    class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"
                                                                                      style="background-color: rgb(0, 136, 204);"></span></span>
                                <div class="minicolors-panel minicolors-slider-hue" style="display: none;">
                                    <div class="minicolors-slider minicolors-sprite">
                                        <div class="minicolors-picker" style="top: 66.6667px;"></div>
                                    </div>
                                    <div class="minicolors-opacity-slider minicolors-sprite">
                                        <div class="minicolors-picker"></div>
                                    </div>
                                    <div class="minicolors-grid minicolors-sprite" style="background-color: rgb(0, 170, 255);">
                                        <div class="minicolors-grid-inner"></div>
                                        <div class="minicolors-picker" style="top: 30px; left: 150px;">
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="submit" class="btn green">
                                    <i class="fa fa-check"></i> Submit
                                </button>
                                <button type="button" class="btn default">Cancel</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>
</div>
<script type="text/javascript">
    $(function () {

        $("#color").append('<div style="width: 20px;height: 20px;background: rgba(200, 100, 100, 1)!important"></div>');

    });
    //将输入的颜色字符串转换成十进制数组
    function getData(color) {
        var re = RegExp;
        if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) {
            //#rrggbb
            return [parseInt(re.$1, 16), parseInt(re.$2, 16), parseInt(re.$3, 16)];
        } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) {
            //#rgb
            return [parseInt(re.$1 + re.$1, 16), parseInt(re.$2 + re.$2, 16), parseInt(re.$3 + re.$3, 16)];
        } else if (/^rgb(.*),(.*),(.*)$/i.test(color)) {
            //rgb(n,n,n) or rgb(n%,n%,n%)
            if (re.$1.indexOf("%") > -1) {
                return [parseInt(parseFloat(re.$1, 10) * 2.55),
                    parseInt(parseFloat(re.$2, 10) * 2.55),
                    parseInt(parseFloat(re.$3, 10) * 2.55)];
            } else {
                return [parseInt(re.$1), parseInt(re.$2), parseInt(re.$3)];
            }
        }
    }
    (function ($) {
        $.fn.shade = function (prop, color1, color2, mills) {
            var count = mills / 200;
            var data1 = getData(color1);
            var data2 = getData(color2);
            var red = data1[0], green = data1[1], blue = data1[2];
            var r = (data2[0] - data1[0]) / count, g = (data2[1] - data1[1]) / count, b = (data2[2] - data1[2]) / count;
            obj_temp = $(this);
            for (var i = 1; i < count + 1; i++) {
                setTimeout("$(obj_temp).css('" + prop + "','rgb(" + parseInt(red + r * i + 0.5) + "," +
                    parseInt(green + g * i + 0.5) + "," + parseInt(blue + b * i + 0.5) + ")');", i * 200);
            }
        }
    })(jQuery);
    $("#ff").shade("background-color", "#1ba3e1", "#fff", 5000);
    var ComponentsColorPickers = function () {
        var t = function () {
            jQuery().colorpicker && ($(".colorpicker-default").colorpicker({
                format: "hex"
            }),
                $(".colorpicker-rgba").colorpicker())
        }
            , o = function () {
            $(".demo").each(function () {
                $(this).minicolors({
                    control: $(this).attr("data-control") || "hue",
                    defaultValue: $(this).attr("data-defaultValue") || "",
                    inline: "true" === $(this).attr("data-inline"),
                    letterCase: $(this).attr("data-letterCase") || "lowercase",
                    opacity: $(this).attr("data-opacity"),
                    position: $(this).attr("data-position") || "bottom left",
                    change: function (t, o) {
                        t && (o && (t += ", " + o),
                        "object" == typeof console && console.log(t))
                    },
                    theme: "bootstrap"
                })
            })
        };
        return {
            init: function () {
                o(),
                    t()
            }
        }
    }();
    jQuery(document).ready(function () {
        ComponentsColorPickers.init()
    });

</script>
</body>
</html>